<template>
  <div>
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="page-title">受众分析</div>

      <!-- 受众分析 -->
      <div class="audience-analysis">
        <div class="analysis-header">
          <div class="analysis-title">受众数据分析</div>
          <div class="analysis-filters">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item class="list-search-three">
                <span>时间范围：</span>
                <el-radio-group v-model="timeRange">
                  <el-radio-button label="7d">近7天</el-radio-button>
                  <el-radio-button label="30d">近30天</el-radio-button>
                  <el-radio-button label="90d">近90天</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="list-search-three">
                <el-select v-model="platform" placeholder="全部平台">
                  <template #prefix>
                    <div class="ml-2">
                      <span>平台</span>
                      <el-divider direction="vertical"></el-divider>
                    </div>
                  </template>
                  <el-option
                      v-for="item in platformOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="list-search-three">
                <el-select v-model="contentType" placeholder="请选择内容类型">
                  <template #prefix>
                    <div class="ml-2">
                      <span>内容类型</span>
                      <el-divider direction="vertical"></el-divider>
                    </div>
                  </template>
                  <el-option
                      v-for="item in sortingOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <!-- 受众概览 -->
      <div class="audience-overview">
        <div class="overview-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fa-solid fa-users"></i>
            </div>
            <div class="card-title">总受众数</div>
          </div>
          <div class="card-value">{{ formatNumber(audienceData.totalAudience) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ audienceData.totalAudienceChange }}%</span>
          </div>
        </div>

        <div class="overview-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fa-solid fa-heart"></i>
            </div>
            <div class="card-title">互动用户数</div>
          </div>
          <div class="card-value">{{ formatNumber(audienceData.interactiveUsers) }}</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ audienceData.interactiveUsersChange }}%</span>
          </div>
        </div>

        <div class="overview-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fa-solid fa-repeat"></i>
            </div>
            <div class="card-title">复访率</div>
          </div>
          <div class="card-value">{{ audienceData.returnRate }}%</div>
          <div class="card-change negative">
            <i class="fa-solid fa-arrow-down"></i>
            <span>{{ audienceData.returnRateChange }}%</span>
          </div>
        </div>

        <div class="overview-card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fa-solid fa-clock"></i>
            </div>
            <div class="card-title">平均停留时间</div>
          </div>
          <div class="card-value">{{ audienceData.avgStayTime }}s</div>
          <div class="card-change positive">
            <i class="fa-solid fa-arrow-up"></i>
            <span>{{ audienceData.avgStayTimeChange }}%</span>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-card">
          <div class="chart-title">受众性别分布</div>
          <div class="chart-content">
            <canvas id="genderChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">受众年龄分布</div>
          <div class="chart-content">
            <canvas id="ageChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">活跃时间分布</div>
          <div class="chart-content">
            <canvas id="activeTimeChart"></canvas>
          </div>
        </div>

        <div class="chart-card">
          <div class="chart-title">受众增长趋势</div>
          <div class="chart-content">
            <canvas id="growthTrendChart"></canvas>
          </div>
        </div>
      </div>

      <!-- 受众画像表格 -->
      <div class="audience-profile">
        <div class="profile-title">受众画像</div>
        <el-table :data="audienceProfileData" stripe style="width: 100%">
          <el-table-column prop="name" label="特征"></el-table-column>
          <el-table-column prop="value" label="描述"></el-table-column>
          <el-table-column prop="percentage" label="占比"></el-table-column>
        </el-table>
      </div>

      <!-- 兴趣分布 -->
      <div class="interest-distribution">
        <div class="interest-title">兴趣分布</div>
        <div class="interest-categories">
          <div class="interest-category">
            <div class="category-header">
              <div class="category-icon" style="background-color: rgba(254, 44, 85, 0.1); color: var(--primary-color);">
                <i class="fa-solid fa-shopping-bag"></i>
              </div>
              <div class="category-name">时尚美妆</div>
            </div>
            <div class="interest-items">
              <div class="interest-item">
                <div class="interest-name">穿搭技巧</div>
                <div class="interest-value">86%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 86%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">彩妆教程</div>
                <div class="interest-value">78%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 78%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">护肤品评测</div>
                <div class="interest-value">65%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 65%;"></div>
              </div>
            </div>
          </div>

          <div class="interest-category">
            <div class="category-header">
              <div class="category-icon"
                   style="background-color: rgba(54, 162, 235, 0.1); color: rgba(54, 162, 235, 1);">
                <i class="fa-solid fa-utensils"></i>
              </div>
              <div class="category-name">美食探店</div>
            </div>
            <div class="interest-items">
              <div class="interest-item">
                <div class="interest-name">网红餐厅</div>
                <div class="interest-value">92%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 92%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">家常菜谱</div>
                <div class="interest-value">75%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 75%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">甜品烘焙</div>
                <div class="interest-value">68%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 68%;"></div>
              </div>
            </div>
          </div>

          <div class="interest-category">
            <div class="category-header">
              <div class="category-icon"
                   style="background-color: rgba(75, 192, 192, 0.1); color: rgba(75, 192, 192, 1);">
                <i class="fa-solid fa-plane"></i>
              </div>
              <div class="category-name">旅行攻略</div>
            </div>
            <div class="interest-items">
              <div class="interest-item">
                <div class="interest-name">国内游</div>
                <div class="interest-value">88%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 88%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">小众景点</div>
                <div class="interest-value">79%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 79%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">美食探店</div>
                <div class="interest-value">63%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 63%;"></div>
              </div>
            </div>
          </div>

          <div class="interest-category">
            <div class="category-header">
              <div class="category-icon"
                   style="background-color: rgba(153, 102, 255, 0.1); color: rgba(153, 102, 255, 1);">
                <i class="fa-solid fa-laptop"></i>
              </div>
              <div class="category-name">数码科技</div>
            </div>
            <div class="interest-items">
              <div class="interest-item">
                <div class="interest-name">手机评测</div>
                <div class="interest-value">85%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 85%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">摄影器材</div>
                <div class="interest-value">73%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 73%;"></div>
              </div>

              <div class="interest-item">
                <div class="interest-name">智能家居</div>
                <div class="interest-value">60%</div>
              </div>
              <div class="interest-bar">
                <div class="interest-progress" style="width: 60%;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 地域分布 -->
      <div class="location-distribution">
        <div class="location-title">地域分布</div>
        <div class="location-content">
          <div class="location-map">
            <!-- 这里会放置中国地图，使用canvas绘制 -->
            <div class="map-placeholder">
              <i class="fa-solid fa-map-china"></i>
              <p>地域分布地图</p>
            </div>
          </div>

          <div class="location-list">
            <div class="location-item" v-for="(location, index) in locationData" :key="index">
              <div class="location-name">
                <span>{{ index + 1 }}.</span>
                {{ location.name }}
              </div>
              <div class="location-percentage">{{ location.percentage }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  name: "Suggest-View",
  layout: "admin",
  data() {
    return {
      platformOptions: [
        {
          value: "选项1",
          label: "最新发布",
        },
        {
          value: "选项2",
          label: "最多浏览",
        },
        {
          value: "选项3",
          label: "最多点赞",
        },
        {
          value: "选项3",
          label: "最多评论",
        },
      ],
      sortingOptions: [
        {
          value: "选项1",
          label: "最新发布",
        },
        {
          value: "选项2",
          label: "最多浏览",
        },
        {
          value: "选项3",
          label: "最多点赞",
        },
        {
          value: "选项3",
          label: "最多评论",
        },
      ],
      activeMenu: 'analytics-audience', // 侧边栏激活菜单
      timeRange: '30d', // 默认时间范围
      platform: 'xiaohongshu', // 默认平台
      contentType: 'dress', // 默认内容类型
      audienceData: { // 受众概览数据（模拟）
        totalAudience: 128500,
        totalAudienceChange: 12.3,
        interactiveUsers: 45200,
        interactiveUsersChange: 8.7,
        returnRate: 32.5,
        returnRateChange: -2.1,
        avgStayTime: 245,
        avgStayTimeChange: 5.6
      },
      audienceProfileData: [ // 受众画像表格数据（模拟）
        {name: '主要性别', value: '女性', percentage: '89%'},
        {name: '核心年龄', value: '18-25岁', percentage: '58%'},
        {name: '活跃时段', value: '20:00-22:00', percentage: '35%'},
        {name: '地域分布', value: '一线城市', percentage: '42%'}
      ],
      // 图表实例存储
      genderChart: null,
      ageChart: null,
      activeTimeChart: null,
      growthTrendChart: null
    };
  },
  created() {
    this.loadAudienceData(); // 初始化加载数据
  },
  methods: {
    // ElementUI菜单展开/收起回调
    //    handleOpen(key, keyPath) {},
    //    handleClose(key, keyPath) {},

    // 加载受众数据（模拟API请求）
    async loadAudienceData() {
      try {
        // 实际应替换为真实API请求（示例使用模拟数据）
        const mockData = {
          audienceOverview: {
            totalAudience: 128500 + Math.random() * 5000,
            totalAudienceChange: (Math.random() * 10 - 2).toFixed(1),
            interactiveUsers: 45200 + Math.random() * 3000,
            interactiveUsersChange: (Math.random() * 8 - 1).toFixed(1),
            returnRate: (Math.random() * 10 + 25).toFixed(1),
            returnRateChange: (Math.random() * 3 - 2).toFixed(1),
            avgStayTime: 245 + Math.random() * 30,
            avgStayTimeChange: (Math.random() * 6 - 1).toFixed(1)
          },
          genderDistribution: [ // 性别分布数据
            {label: '女性', value: 89},
            {label: '男性', value: 11}
          ],
          ageDistribution: [ // 年龄分布数据
            {label: '18岁以下', value: 8},
            {label: '18-25岁', value: 58},
            {label: '26-35岁', value: 25},
            {label: '36岁以上', value: 9}
          ],
          activeTimeDistribution: [ // 活跃时间数据
            {label: '00:00-08:00', value: 12},
            {label: '08:00-16:00', value: 23},
            {label: '16:00-24:00', value: 65}
          ],
          growthTrend: [ // 增长趋势数据
            {x: '2024-06-01', y: 102000},
            {x: '2024-06-07', y: 105000},
            {x: '2024-06-14', y: 110000},
            {x: '2024-06-21', y: 118000},
            {x: '2024-06-28', y: 128500}
          ]
        };

        // 更新受众概览数据
        this.audienceData = mockData.audienceOverview;

        // 初始化/更新图表
        this.initCharts(mockData);
      } catch (err) {
        this.$message.error('数据加载失败，请重试');
      }
    },

    // 初始化图表
    initCharts(data) {
      // 性别分布（饼图）
      if (this.genderChart) this.genderChart.destroy();
      const genderCtx = document.getElementById('genderChart').getContext('2d');
      this.genderChart = new Chart(genderCtx, {
        type: 'pie',
        data: {
          labels: data.genderDistribution.map(item => item.label),
          datasets: [{
            data: data.genderDistribution.map(item => item.value),
            backgroundColor: ['#FE2C55', '#FF7D94']
          }]
        },
        options: {responsive: true}
      });

      // 年龄分布（柱状图）
      if (this.ageChart) this.ageChart.destroy();
      const ageCtx = document.getElementById('ageChart').getContext('2d');
      this.ageChart = new Chart(ageCtx, {
        type: 'bar',
        data: {
          labels: data.ageDistribution.map(item => item.label),
          datasets: [{
            data: data.ageDistribution.map(item => item.value),
            backgroundColor: '#FE2C55'
          }]
        },
        options: {
          responsive: true,
          scales: {y: {beginAtZero: true}}
        }
      });

      // 活跃时间分布（环形图）
      if (this.activeTimeChart) this.activeTimeChart.destroy();
      const activeTimeCtx = document.getElementById('activeTimeChart').getContext('2d');
      this.activeTimeChart = new Chart(activeTimeCtx, {
        type: 'doughnut',
        data: {
          labels: data.activeTimeDistribution.map(item => item.label),
          datasets: [{
            data: data.activeTimeDistribution.map(item => item.value),
            backgroundColor: ['#FE2C55', '#FF7D94', '#FFB3C1']
          }]
        },
        options: {responsive: true}
      });

      // 增长趋势（折线图）
      if (this.growthTrendChart) this.growthTrendChart.destroy();
      const growthTrendCtx = document.getElementById('growthTrendChart').getContext('2d');
      this.growthTrendChart = new Chart(growthTrendCtx, {
        type: 'line',
        data: {
          labels: data.growthTrend.map(item => item.x),
          datasets: [{
            data: data.growthTrend.map(item => item.y),
            borderColor: '#FE2C55',
            tension: 0.4
          }]
        },
        options: {responsive: true}
      });
    },

    // 数字格式化（千位分隔符）
    formatNumber(value) {
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  }
};
</script>

<style scoped lang="scss">

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 受众分析相关样式 */
.audience-analysis {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.analysis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.analysis-title {
  font-size: 18px;
  font-weight: 500;
}

.analysis-filters {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-filter,
.platform-filter,
.content-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 受众概览卡片 */
.audience-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.overview-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(254, 44, 85, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
}

.card-title {
  font-size: 14px;
  color: var(--gray-color);
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-change {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.card-change.positive {
  color: var(--success-color);
}

.card-change.negative {
  color: var(--primary-color);
}

/* 图表区域 */
.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.chart-content {
  height: 300px;
}

/* 受众画像表格 */
.audience-profile {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.profile-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* 兴趣分布 */
.interest-distribution {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.interest-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.interest-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.interest-category {
  padding: 16px;
  border-radius: 8px;
  background-color: #F8F8F8;
  transition: all 0.3s ease;
}

.interest-category:hover {
  background-color: rgba(254, 44, 85, 0.05);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.category-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-name {
  font-weight: 500;
}

.interest-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.interest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interest-name {
  font-size: 14px;
}

.interest-value {
  font-size: 14px;
  font-weight: 500;
}

.interest-bar {
  height: 6px;
  background-color: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.interest-progress {
  height: 100%;
  background-color: var(--primary-color);
}

/* 地域分布 */
.location-distribution {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.location-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.location-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.location-map {
  background-color: #F8F8F8;
  border-radius: 8px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.location-item:hover {
  background-color: rgba(254, 44, 85, 0.05);
}

.location-name {
  font-weight: 500;
}

.location-percentage {
  font-weight: 500;
  color: var(--primary-color);
}

.list-search-one-change {
  border: 1px #e18634 solid;
}

.list-search-three {
  ::v-deep .el-input__prefix {
    left: 11px;
  }

  ::v-deep .el-input--prefix .el-input__inner {
    padding-left: 97px;
    border-radius: 10px;
  }

  ::v-deep .el-select > .el-input {
    display: block;
    width: 320px;

  }
}
</style>
